.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color:#F1F3F5;
}

.top-nav {
    padding: 16vp 16vp 0;
    background-color: #FFFFFF;
    width: 100%;
    align-content: space-between;
    justify-content: space-between;
}

.top-icon {
    width: 32vp;
    height: 32vp;
}

.top {
    flex-direction: column;
}

.top-swiper {
    flex-direction: column;
}

.swiper {
    height: 300vp;
    background-color: #FFFFFF;
}

.swiper-content {
    width: 100%;
    justify-content: center;
}

.swiper-content-image {
    width: 280vp;
    height: 280vp;
}

.product-info {
    flex-direction: column;
    width: 100%;
    margin: 12vp;
    background-color: #FFFFFF;
    border-radius: 16vp;
    padding: 16vp 12vp;
}

.product-price {
    font-size: 20fp;
    color: #E92F4F;
    font-weight: 600;
}

.product-title {
    font-size: 16fp;
    color: #000000;
    text-align: left;
    font-weight: 600;
    width: 86.7%;
}

.widgets-box {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
}

.widgets-content {
    margin-top: 14vp;
}

.widgets-icon-size {
    width: 14vp;
    height: 14vp;
}

.widgets-text {
    opacity: 0.6;
    font-size: 10fp;
    color: #000000;
    font-weight: 400;
}

.selected-info {
    width: 100%;
    margin: 6vp 12vp;
    background-color: #FFFFFF;
    border-radius: 16vp;
    padding: 16vp 12vp;
    justify-content: space-around;
    align-items: flex-start;
}

.selected-text {
    font-size: 14fp;
    color: #000000;
    font-weight: 600;
}

.right-box {
    width: 83.3%;
    justify-content: space-between;
}

.selected-detail {
    width: 78.3%;
    font-size: 14fp;
    color: #000000;
    font-weight: 600;
}

.icon-more {
    width: 6vp;
    height: 12vp;
}

.delivered-divider {
    border: 1 solid rgba(0, 0, 0, 0.20);
}

.other-list-loop {
    margin: 8vp 0;
}

.red-icon {
    width: 16vp;
    height: 16vp;
    margin-right: 3%;
}

.delivered {
    font-size: 14fp;
    color: #000000;
    font-weight: 500;
}

.other {
    padding: 12vp 12vp;
    width: 100%;
    margin: 6vp 12vp;
    background-color: #FFFFFF;
    border-radius: 16vp;
    flex-direction: column;
}

.other-delivered {
    width: 100%;
    justify-content: space-around;
}

.delivered-text {
    font-size: 14fp;
    color: #000000;
    font-weight: 600;
}

.right-box-content {
    flex-direction: column;
}

.other-middle-box {
    justify-content: space-between;
}

.other-server-box {
    margin-top: 5vp;
    align-items: flex-start;
    width: 100%;
    justify-content: space-around;
}

.other-server {
    margin-top: 6vp;
    font-size: 14fp;
    color: #000000;
    font-weight: 600;
}

.sub-box {
    flex-direction: column;
}

.server-content {
    width: 90%;
    font-size: 14fp;
    color: #000000;
    font-weight: 400;
}

.bottom-tool {
    background-color: #F1F3F5;
    position: fixed;
    bottom: 0vp;
    width: 100%;
    height: 64vp;
}

.bottom-tool-style {
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    padding: 0 2.2% 0 2.2%;
}

.home-buy-box {
    flex-direction: column;
    margin-top: 9vp;
    margin-bottom: 6vp;
    justify-content: center;
    align-items: center;
}

.icon-add-background {
    background-color: #FF944B;
    height: 100%;
    width: 50%;
    border-radius: 16vp 0 16vp 0;
    justify-content: center;
    align-items: center;
}

.icon-buy-background {
    background-color: #F34645;
    height: 100%;
    width: 50%;
    border-radius: 0 16vp 0 16vp;
    justify-content: center;
    align-items: center;
}

.two-colors-box {
    width: 53.3%;
    height: 40vp;
}

.bottom-comm-icon {
    width: 22vp;
    height: 21vp;
    margin-bottom: 4vp;
}

.shopping-home-text {
    opacity: 0.6;
    font-size: 10fp;
    color: #000000;
    font-weight: 400;
}

.add-buy-text {
    color: #FFFFFF;
}
